<!--
 * @Author: lailifang
 * @Date: 2022-03-15 17:17:11
 * @Description: 商品预警频次Top10
-->
<template>
  <div class="right">
    <com-box :title="barState.title">
      <template v-slot>
        <charts :params="barState.params"></charts>
      </template>
    </com-box>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, watch } from 'vue'
import { useStore } from 'vuex'
import comBox from '@/components/comBox/comBox.vue'
import httpRequest from '@/service'
export default defineComponent({
  name: 'leftTop',
  components: { comBox },
  props: {
    adcode: {
      type: String,
      default: ''
    },
    timeValue: {
      type: Array,
      default: () => {
        return []
      }
    },
    classId: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const store = useStore()
    interface IChartState {
      title: string
      params: any
      [key: string]: any
      // getData: () => void
    }
    // 柱图
    const barState = reactive<IChartState>({
      title: '',
      colorList: ['#eb6100', '#08eef1', '#f8b551'],
      params: {
        custom: true,
        loading: true,
        map: {
          value: '数量'
        },
        options: {
          dataset: {
            dimensions: ['name', 'value'],
            source: []
          },
          legend: {
            show: false
          },
          grid: {
            left: '140px',
            right: 80,
            bottom: 40
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              snap: true
            },
            confine: true,
            backgroundColor: '#1959a7',
            borderColor: '#4beeff',
            borderWidth: 1,
            padding: 12,
            textStyle: {
              color: '#fff',
              fontSize: 14
            },
            formatter: (params: any) => {
              const { data, marker } = params[0]
              return `<div style="font-weight: bold;">${data.name}
                <div style="display: flex;align-items: center;justify-content: space-between;font-weight: bold;"><span>${marker}<span style="margin-left:5px">数量</span></span><span style="margin-left:15px;">${data.value}</span></div>
                </div>`
            }
          },
          xAxis: [
            {
              type: 'value',
              inverse: false,
              show: false
            }
          ],
          yAxis: [
            {
              type: 'category',
              axisTick: {
                show: false
              },
              axisLine: {
                show: false,
                onZeroAxisIndex: 0
              },
              max: 9,
              inverse: true,
              axisLabel: {
                fontSize: 14,
                color: '#9ccfff',
                position: 'left',
                nameLocation: 'start',
                formatter: (value: any) => {
                  return value.length > 8 ? value.slice(0, 8) + '...' : value
                }
              }
            }
          ],
          series: [
            {
              type: 'bar',
              label: {
                position: [280, -5],
                align: 'left',
                color: 'inherit',
                fontFamily: 'normal',
                fontWeight: 'bold'
              },
              itemStyle: {
                borderRadius: [8, 8, 8, 8],
                color: (params: any) => {
                  let color = ''
                  if (params.dataIndex < 3) {
                    color = barState.colorList[params.dataIndex]
                  } else {
                    color = '#00a0e9'
                  }
                  return color
                }
              },
              barWidth: 15,
              zlevel: 1,
              data: []
            },
            {
              type: 'bar',
              backgroundStyle: {
                color: 'rgba(68,156,255,0.1)'
              },
              label: {
                show: true,
                position: ['105%', 0],
                align: 'left',
                color: '#00baff',
                fontFamily: 'AliHYAiHei',
                fontSize: '17px',
                formatter: (params: any) => {
                  return `{${params.dataIndex}|${params.data.sourceValue}}`
                },
                rich: {
                  0: {
                    color: '#eb6100',
                    fontSize: '17px'
                  },
                  1: {
                    color: '#08eef1',
                    fontSize: '17px'
                  },
                  2: {
                    color: '#f8b551',
                    fontSize: '17px'
                  }
                }
              },
              itemStyle: {
                borderRadius: [8, 8, 8, 8],
                color: 'rgba(68,156,255,0.1)'
                // color: '#f0f'
              },
              barWidth: 15,
              barGap: '-100%',
              data: []
            }
          ]
        }
      }
    })
    const getData = () => {
      barState.params.loading = true
      httpRequest
        .get({
          url: 'M4WarningFrequency',
          params: {
            adcode: props.adcode,
            startTime: store.state.globalDate.startDate,
            endTime: store.state.globalDate.endDate,
            classId: props.classId
          }
        })
        .then((res: any) => {
          barState.title = res.title
          const dataSort = res.data.sort((a: any, b: any) => {
            return b.value - a.value
          })
          barState.params.options.dataset.source = dataSort
          const maxValue = dataSort[0].value
          barState.params.options.series[0].data = dataSort
          barState.params.options.series[1].data = dataSort.map(
            (item: any) => ({
              ...item,
              sourceValue: item.value,
              value: maxValue
            })
          )
          barState.params.options.yAxis[0].data = dataSort.map(
            (item: any) => item.name
          )
          const echartWidth =
            String(dataSort[dataSort.length - 1].value).length * 8.6
          barState.params.options.grid.right = 30 + echartWidth
          barState.params.loading = false
        })
        .catch(() => {
          console.log('请求失败')
        })
    }
    watch(
      () => [props.adcode, props.timeValue, props.classId],
      () => {
        getData()
      }
    )
    const refreshData = () => {
      getData()
    }
    return { barState, refreshData }
  }
})
</script>
<style lang="less" scoped>
.right {
  position: relative;
  z-index: 10;
  width: 480px;
  height: 760px;
  margin-top: 15px;
}
</style>
